<template>
	<div id="" class="location-list" ref="wrp">
		<div id="" class="cont">
			<span id="" class="location-list-tit" ref="present">
				当前
			</span>
			<input type="text" name="" id="" class="location-list-inp" :value="city" />
			<span id="" class="location-list-tit" ref='cre'>
				热门
			</span>
			<ul class="location-list-cre">
				<li class="location-list-set" v-for="item in hotCities">{{item.name}}</li>
			</ul>
			<div id="" v-for="(item , key ) in cities">
				<span id="" :ref="key" class="location-list-tit">
					{{key}}
				</span>
				<ul class="location-list-cre">
					<li class="location-list-set" v-for="childItem in item">{{childItem.name}}</li>
				</ul>
			</div>
			
		</div>
	</div>
</template>

<script>
	import BScroll from "better-scroll"
	import BMap from 'BMap'
	export default{
		props:{
			content:String,
			cities:Object,
			hotCities:Array,
			lcd:String
		},
		watch:{
			content:function(){
//				console.log(this.content)
			const elementCont=this.$refs[this.content];
			const elepresent=this.$refs.present;
			const eleCre=this.$refs.cre;
			if(elementCont){
				const ele=elementCont[0];
				this.scroll.scrollToElement(ele);
			}else if(elepresent){
				this.scroll.scrollToElement(elepresent);
				
			}else if(eleCre){
				this.scroll.scrollToElement(eleCre);
				}
			}
		},
		data(){
			return{
				city:"",
				currentlcd:this.lcd
				}
			
		},
		mounted(){
			let map=new BMap.Map('allmap');//地图实例
			let myCity=new BMap.LocalCity();
			myCity.get((result)=>{
				if(result){
					this.city=result.name
				}else{
					this.city='北京'
				}
			});
		  this.scroll = new BScroll(this.$refs.wrp,{
	     		click:true,
	      		mouseWheel:{
		       	 	speed:20,
		       		invert:false,
		       		easeTime:300
    		 	 }
   		});
   		this.$refs.wrp.style.display=this.currentlcd;
		}
	}
</script>

<style lang="stylus" scoped="">
.location-list
	position:absolute
	/*overflow:hidden*/
	top:0
	left:0
	bottom:0
	width:100%
	padding:1rem .5rem .5rem .5rem
	z-index:10
	box-sizing:border-box
	.cont
		padding:1.4rem 0;
		display:flex
		flex-direction:column
		.location-list-tit
			font-size:16px
			padding:.1rem .1rem;
		.location-list-inp
			width:92%
			font-size:14px
			padding:.1rem .2rem
			margin:.2rem .2rem
			border-radius:.08rem
			color:#999;
		.location-list-cre
			margin-left:0rem 0 0 .2rem
			.location-list-set
				padding:.15rem .25rem
				margin:.2rem .15rem
				width:1.2rem
				background:white
				border-radius:.1rem
				font-size:14px
				float:left
				text-align:center
</style>